<template>
	<navigator url="/pages/detail/index" hover-class="navigator-hover">
		<view class="content">
			<view class="box">
				<image :src="activity.img"></image>
				<view class="bottom">
					<view class="name txt-cut2">
						{{activity.name}}
					</view>
					<view class="inof">
						<view>{{activity.addr}}</view>
						<view>{{activity.date}}</view>
					</view>
				</view>
			</view>
		</view>
	</navigator>
</template>

<script>
	export default {
		name: 'Activity1',
		props: {
			activity: {}
		},
		data: function () {
			return {

			};
		}
	}
</script>

<style scoped>
	.content {
		padding: 10px;
	}

	.box {
		border: 1px solid #eee;
	}

	.box image {
		width: 100%;
		height: 180px;
	}

	.bottom {
		padding: 15px 10px;
	}

	.inof {
		display: flex;
		justify-content: space-between;
		color: #888888;
		font-size: 25px;
		margin: 15px 5px;
	}

	.name {
		height: 85px;
		overflow: hidden;
	}
</style>
